<template>
	<div class="login">
		<p class="login__header">账号登录</p>

		<el-form
			class="login__body"
			ref="formRef"
			:model="formData"
			:rules="formRules"
			auto-complete="on"
			label-width="80px"
			label-position="top"
		>
			<el-form-item label="账号" prop="username">
				<el-input
					type="text"
					auto-complete="on"
					autofocus
					v-model="formData.username"
					placeholder="请输入账号"
				>
					<base-icon name="user" slot="prefix" icon-class="icon"></base-icon>
				</el-input>
			</el-form-item>

			<el-form-item label="密码" prop="password">
				<el-input
					:type="passwordType"
					auto-complete="on"
					v-model="formData.password"
					@keyup.enter.native="handleLogin"
					placeholder="请输入密码"
				>
					<base-icon slot="prefix" name="lock" icon-class="icon"></base-icon>
					<base-icon
						slot="suffix"
						:name="passwordType === 'password' ? 'eye-close' : 'eye-open'"
						icon-class="icon icon-eye"
						@click.native="showPwd"
					></base-icon>
				</el-input>
			</el-form-item>

			<el-form-item>
				<el-checkbox v-model="formData.rememberPwd" @change="remember">记住账号</el-checkbox>
				<div class="register">
					<router-link to="/account/forget">忘记密码?</router-link>
					<span>没有账号?</span>
					<router-link to="/account/register">立即注册</router-link>
				</div>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" :loading="loginLoading" @click="handleLogin">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { encryptByDES } from '@/utils/crypto'
import { login } from '@/api/request'
export default {
	data() {
		return {
			formData: {
				username: localStorage.getItem('rememberCount') ? localStorage.getItem('rememberCount') : '',
				password: '',
				rememberPwd: localStorage.getItem('rememberState') ? Boolean(localStorage.getItem('rememberState')) : false,
			},
			formRules: {
				username: [
					{
						required: true,
						message: '账号不能为空',
						trigger: 'blur',
					},
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur',
					},
					{
						min: 6,
						message: '密码长度不能少于六位',
						trigger: 'blur',
					},
				],
			},
			passwordType: 'password',
			loginLoading: false,
		}
	},
	methods: {
		remember() {
			console.log(this.formData.rememberPwd)
			if (this.formData.rememberPwd) {
				let account = this.formData.username
				localStorage.setItem('rememberState', this.formData.rememberPwd)
				localStorage.setItem('rememberCount', account)
			} else {
				let account = this.formData.username
				localStorage.removeItem('rememberState', this.formData.rememberPwd)
				localStorage.removeItem('rememberCount', account)
			}
		},
		showPwd() {
			this.passwordType = this.passwordType == 'password' ? 'text' : 'password'
		},
		async handleLogin() {
			this.loginLoading = true
			let res = await login({ account: this.formData.username, pass: this.formData.password })
			// console.log(res)
			if (res.state === 'OK') {
				// localStorage.setItem('userInfo', JSON.stringify(res.data))
				let u_name = res.data.u_name
				let u_jurisdiction = res.data.u_jurisdiction
				if (u_jurisdiction === 'ordinary') {
					this.$message({
						message: '登录成功! 欢迎您' + u_name + '!',
						type: 'success',
					})
				}
				if (u_jurisdiction === 'vip') {
					this.$message({
						message: '登录成功! 尊敬的VIP用户' + u_name + '欢迎您!',
						type: 'success',
					})
				}
				if (u_jurisdiction === 'admin') {
					this.$message({
						message: '登录成功! 尊敬的管理员' + u_name + '欢迎您!',
						type: 'success',
					})
				}
				if (u_jurisdiction === 'superAdmin') {
					this.$message({
						message: '登录成功! 尊敬的超级管理员' + u_name + '欢迎您!',
						type: 'success',
					})
				}
				let data = res.data
				sessionStorage.setItem('info', window.JSON.stringify(data))
				this.$router.replace('/dashboard/index')
			} else {
				this.loginLoading = false
				this.$message.error(res.data)
			}

			// this.$refs.formRef.validate(async valid => {
			// 	if (valid) {
			// 		const eccryptKey = '123456781111'
			// 		const account = {
			// 			username: this.formData.username,
			// 			password: encryptByDES(this.formData.password, eccryptKey),
			// 		}
			// 		this.loginLoading = true
			// 		try {
			// 			await this.$store.dispatch('login', account)
			// 			this.$router.replace('/').catch(() => {})
			// 		} catch (err) {
			// 			console.error(err)
			// 			this.$message.error('登录失败,请填写正确的信息！')
			// 		} finally {
			// 			this.loginLoading = false
			// 		}
			// 	}
			// })
		},
	},
}
</script>

<style lang="scss" scoped>
.login {
	padding: 15px 20px;
	/* background-color: rgba(255, 255, 255, 0); */
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.7);
	border-radius: 10px;
	opacity: 0.9;

	.login__header {
		font-size: 22px;
		text-align: center;
		color: #fff;
	}

	.login__body {
		.icon {
			color: $black3;
			font-size: 18px;
		}

		.icon.icon-eye {
			padding-right: 10px;
			cursor: pointer;
		}

		.register {
			float: right;
			color: #fff;
		}
	}
}
</style>

<style lang="scss">
.login {
	.el-input--prefix {
		.el-input__prefix {
			left: 10px;
		}

		.el-input__inner {
			padding-left: 35px;
			padding-right: 35px;
		}
	}

	.el-form-item__label,
	.el-checkbox__label {
		color: #fff;
	}

	.el-button {
		display: block;
		width: 100%;
	}
}
</style>
